<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[800px] max-h-[80vh] overflow-y-auto">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold">职位预览</h3>
          <button @click="$emit('close')" class="text-gray-600 hover:text-gray-800">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
      </div>
      
      <div class="p-6">
        <div class="mb-6">
          <div class="flex justify-between items-start mb-4">
            <div>
              <div class="flex items-center mb-2">
                <span v-if="job.urgent" class="bg-orange-100 text-orange-500 text-xs px-2 py-0.5 rounded mr-2">急聘</span>
                <span v-if="job.featured" class="bg-red-100 text-red-500 text-xs px-2 py-0.5 rounded mr-2">置顶</span>
                <h2 class="text-2xl font-medium">{{ job.title }}</h2>
              </div>
              <div class="text-blue-600 text-xl font-medium">{{ job.salary }}</div>
            </div>
          </div>
          
          <div class="flex items-center space-x-6 mb-6 text-sm text-gray-600">
            <div class="flex items-center">
              <i class="ri-map-pin-line mr-1"></i>
              <span>{{ job.location }}</span>
            </div>
            <div class="flex items-center">
              <i class="ri-time-line mr-1"></i>
              <span>{{ job.experience }}</span>
            </div>
            <div class="flex items-center">
              <i class="ri-book-open-line mr-1"></i>
              <span>{{ job.education }}</span>
            </div>
            <div class="flex items-center">
              <i class="ri-briefcase-line mr-1"></i>
              <span>{{ job.type }}</span>
            </div>
          </div>
          
          <div v-if="job.highlights.length > 0" class="flex flex-wrap gap-2 mb-6">
            <span 
              v-for="highlight in job.highlights"
              :key="highlight"
              class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded"
            >
              {{ highlight }}
            </span>
          </div>
        </div>
        
        <div class="border-t pt-6">
          <div class="mb-6">
            <h3 class="text-lg font-medium mb-3">职位描述</h3>
            <div class="text-gray-600 leading-relaxed whitespace-pre-line">{{ job.description }}</div>
          </div>
          
          <div class="mb-6">
            <h3 class="text-lg font-medium mb-3">任职要求</h3>
            <div class="text-gray-600 leading-relaxed whitespace-pre-line">{{ job.requirements }}</div>
          </div>
          
          <div v-if="job.benefits.length > 0">
            <h3 class="text-lg font-medium mb-3">福利待遇</h3>
            <div class="flex flex-wrap gap-2">
              <span 
                v-for="benefit in job.benefits"
                :key="benefit"
                class="px-3 py-1 bg-green-50 text-green-600 text-sm rounded-full"
              >
                {{ benefit }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="p-6 border-t flex justify-end space-x-3">
        <button @click="$emit('close')" class="px-4 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
          返回编辑
        </button>
        <button @click="$emit('publish')" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90">
          确认发布
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  job: any
}

defineProps<Props>()
defineEmits<{
  close: []
  publish: []
}>()
</script>
